<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="valet">
        <navigation :msg='navMsg'></navigation>
        <div class="valet-index">
          <div>
            <span class="text-status">*</span>
            <span class="title">客户</span>
            <el-select filterable
                       placeholder="请选择客户"
                       style="width: 510px;"
                       v-model="valueName">
              <el-option v-for="item in client"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
              <div class="add-newClient">
                <span>新增乘客</span>
                <span class="icon-test182"></span>
              </div>
            </el-select>
          </div>
          <div class="order-list">
            <h4>退货清单</h4>
            <span>(<span style="color:#f00">*</span>必填)</span>
            <div class="order-table">
              <table>
                <tr class="order-th">
                  <th>序号</th>
                  <th>规格图</th>
                  <th>商品名称/商品编号</th>
                  <th>规格名称/规格编号</th>
                  <th>单位</th>
                  <th><span>*</span>数量</th>
                  <th><span>*</span>单价</th>
                  <th>小计</th>
                  <th>备注</th>
                </tr>
              </table>
              <div class="detail-center">
                <div class="add-list"><a href="">+添加订货清单</a></div>
              </div>
            </div>
            <div class="out-money">
                <span>退款金额</span>
                <el-input class="out-input el-input--mini" v-model="input" placeholder="请输入退款金额"></el-input>
                <span>合计金额</span>
                <p class="money-style">￥{{input}}</p>
            </div>
            <div class="client-info">
              <div class="take-way">
                <label for=""><span style="color: #f00">*</span>收货仓库</label>
                <el-select v-model="valuesType" class="el-input--medium" placeholder="请选择配送方式">
                  <el-option
                    v-for="item in ranges"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="sub-time">
                <label for="">交货日期</label>
                <el-date-picker
                  class="el-input--medium"
                  v-model="goDate"
                  type="datetime"
                  placeholder="请输入交货日期">
                </el-date-picker>
              </div>
              <div class="from-time">
                <label for="">退货日期</label>
                <el-date-picker
                  class="el-input--medium"
                  v-model="fromDate"
                  type="datetime"
                  placeholder="请输入退货日期">
                </el-date-picker>
              </div>
              <div class="tips">
                <label for="">备注说明</label>
                <el-input type="text" v-model="text" class="el-input--medium"
                          maxlength="500" show-word-limit placeholder="填写一些说明吧"></el-input>
              </div>
              <div class="annex">
                <label for="">附件信息</label>
                <span class="icon-test401">添加附件</span>
                <span>（单个附件最大支持10M，支持格式：jpg、jpeg、png）</span>
              </div>
            </div>
          </div>
        </div>
        <div class="fix-btn">
          <button><span class="icon-test211">取消</span></button>
          <button><span class="icon-test129">保存</span></button>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      valueName: '',
      values: '',
      valuesFp: '',
      goDate: '',
      fromDate: '',
      valuesType: '',
      checked: false,
      disabled: true,
      input: '',
      text: '',
      num: 2,
      // tableHeight: window.innerHeight - 170,
      // 导航
      navMsg: [
        {
          name: '订单',
          path: '/orders'
        }, {
          name: '退货单',
          path: '/outOrder'
        }, {
          name: '新增退货单',
          path: '/newOutOrder'
        }
      ],
      // 客户
      client: [
        {
          value: '1',
          label: '民治店1'
        },
        {
          value: '2',
          label: '民治店2'
        },
        {
          value: '3',
          label: '民治店3'
        },
        {
          value: '4',
          label: '民治店4'
        },
        {
          value: '5',
          label: '民治店5'
        },
        {
          value: '6',
          label: '民治店6'
        },
        {
          value: '7',
          label: '民治店7'
        },
        {
          value: '8',
          label: '民治店8'
        }
      ],
      // 配送方式
      ranges: [
        {
          value: '1',
          label: '送货上门'
        },
        {
          value: '2',
          label: '物流货运'
        },
        {
          value: '3',
          label: '其他'
        }
      ],
      // 发票
      invoice: [
        {
          value: '1',
          label: '无需发票'
        },
        {
          value: '2',
          label: '增值税普通发票（商品含税，5%）'
        },
        {
          value: '3',
          label: '增值税专用发票（商品含税，10%）'
        },
        {
          value: '4',
          label: '增值税专用发票（商品含税，10%）'
        }
      ],
      // 时间
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {

  },
  created () {
  },
  mounted () {
  },
  components: {
    VCommonHeaderLeft,
    Navigation
  }
}
</script>

<style lang="scss" scoped>
  .valet {
    width: 100%;
    overflow: hidden;
    margin-right: 10px;
    .valet-index {
      height: 495px;
      padding: 1.5rem;
      background-color: #fff;
      overflow: scroll;
      overflow-x: hidden;
      .text-status{
        padding-left: 1rem;
        color: #f00;
      }
      .title{
        font-size: 12px;
        margin-right: 1rem;
      }
      .order-list{
        margin-top: 3rem;
        h4{
          display: inline-block;
          border-left: 2px solid #000;
          padding-left: .5rem;
          margin: 1rem 1rem .5rem 0;
        }
        span{
          font-size: 12px;
          color: #9b9b9b;
        }
        .order-table{
          border: 1px solid rgb(227, 227, 227);
          table{
            width: 100%;
            border-collapse: collapse;
          }
          table tr{
            height: 50px;
            border-bottom: 1px solid rgb(227, 227, 227);
            text-align: center;
          }
          .order-th{
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            background-color: #fcfcfc;
            th{
              width: 100px;
              font-size: .8rem;
              color: #666;
              font-weight: 200;
              span{
              color: #f00;
            }
            }
            th:nth-child(3),
            th:nth-child(4){
              width: 200px;
            }
          }
          .detail-center {
            .add-list {
              font-size: 12px;
            }

            .add-list {
              height: 50px;
              text-align: center;
              font-weight: bold;
              line-height: 50px;

              a {
                color: #20ade5;
              }
            }
          }
        }
        .out-money{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 100px;
            margin: 20px;
            span{
              color: #333;
              padding: 0 20px;
            }
            .out-input{
              width: 140px;
            }
            .money-style{
              font-size: 18px;
              color: #f00;
            }
          }
        .client-info{
          margin-top: 1rem;
          padding: 5px 20px;
          line-height: 40px;
          .take-way{
              margin-left: -6px;
          }
          .add-invoice{
            .add-style{
              color: #333;
              font-size: 12px;
            }
          }
          div label{
            padding-right: 1rem;
            font-size: 12px;
            color: #666;
          }
          div .el-input--medium{
            width: 535px;
          }
          .invoice-type {
            .add-invoice{
              margin-left: 4rem;
              span{
                font-size: 12px;
                color: #333;
              }
              .add-address:hover{
                color: #20ade5;
              }
            }
          }
          .annex{
            span{
              font-size: 12px;
              color: #333;
            }
            span:nth-child(2){
              padding-left: 5px;
            }
            span:nth-child(2):hover{
              color: #20ade5;
            }
          }
        }
      }
    }
    .fix-btn{
      position: relative;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding: 10px 24px;
      font-size: 16px;
      text-align: right;
      border-top: 1px solid rgb(227, 227, 227);
      button{
        width: 150px;
        height: 40px;
        span{
          letter-spacing: 3px;
        }
      }
      button{
        background-color: #ffffff;
        border: 1px solid #20ade5;
      }
      button:first-child{
        margin-right: 1rem;
        color: #20ade5;
      }
      button:last-child{
        background-color: #20ade5;
        border: 1px solid #20ade5;
        span{
          color: #fff;
        }
      }
    }

  }
</style>
